<template>
	<div>
		<div v-show="!flag">
			<el-button type="success" size="small" plain @click="openAdd()">关闭</el-button>
			<add-recommend-materials></add-recommend-materials>
		</div>
		<div v-show="flag">
			<!-- 头部 -->
			<div class="heard-body">
				<div class="heard-left">
					<el-button type="success" size="small" plain @click="openAdd()">新增</el-button>
					<el-button type="danger" size="small" plain disabled>批量删除</el-button>
					<el-button type="warning" size="small" plain disabled>导出</el-button>
				</div>

				<div class="heard-right">
					<el-input
						style="margin-right: 10px"
						placeholder="请输入搜索内容"
						v-model="keyWords"
						size="small"
						clearable
						@change="searchMaterial()"
					></el-input>
					<el-button type="primary" size="small" plain icon="el-icon-search" @click="searchMaterial()"></el-button>
				</div>
			</div>
			<!-- 主体区域 -->
			<el-card shadow="hover" v-show="flag">
				<el-table :data="tableData" stripe style="width: 100%" class="motion-table1">
					<el-table-column prop="title" :label="$t('message.table.title1')" width="400"> </el-table-column>
					<el-table-column prop="keywords" :label="$t('message.table.title9')"> </el-table-column>
					<el-table-column prop="uploader" :label="$t('message.table.title3')"> </el-table-column>
					<el-table-column prop="articleAddtime" :label="$t('message.table.title4')"> </el-table-column>
					<el-table-column fixed="right" :label="$t('message.table.title5')" width="180">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">{{ $t('message.table.title6') }}</el-button>
							<el-button type="text" size="small" disabled style="color: orange">{{ $t('message.table.title7') }}</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="page">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageInfo.pagenum"
						:page-sizes="[4, 6, 8, 10]"
						:page-size="pageInfo.pagesize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
					>
					</el-pagination>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import { getMaterials, searchMaterials } from '@/api/debateMaterials/recommendMaterials/index.js';
import addRecommendMaterials from './addRecommendMaterials.vue';
export default {
	name: 'recommendMaterials',
	components: {
		addRecommendMaterials,
	},
	data() {
		return {
			flag: true,
			keyWords: '',
			tableData: [],
			pageInfo: {
				pagenum: 1,
				pagesize: 4,
			},
			total: 0,
			search: {
				pagenum: 1,
				pagesize: 4,
				searchValue: '',
			},
		};
	},
	created() {
		this.getMaterialsInfo();
	},
	methods: {
		//
		async getMaterialsInfo() {
			let res = await getMaterials(this.pageInfo);
			if (res.statusCode === 20000) {
				this.tableData = res.data.records;
				this.total = res.data.total;
			}
		},
		async searchMaterial() {
			let res = await searchMaterials(this.search);
			if (res.statusCode === 20000) {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.$message.success('搜索成功！');
			} else {
				this.search.searchValue = '';
				this.$message.error('搜索失败！');
			}
		},
		openAdd() {
			if (!this.flag) {
				this.getMaterialsInfo();
			}
			this.flag = !this.flag;
		},
		handleSizeChange(val) {
			this.pageInfo.pagesize = val;
			this.search.pagesize = val;
			if (this.search.searchValue) {
				this.searchMaterial();
			} else {
				this.getMaterialsInfo();
			}
		},
		handleCurrentChange(val) {
			this.pageInfo.pagenum = val;
			this.search.pagenum = val;
			if (this.search.searchValue) {
				this.searchMaterial();
			} else {
				this.getMaterialsInfo();
			}
		},
		handleClick(row) {
			this.$router.push({
				path: '/recommendArticlesDetails',
				query: {
					row: row.id,
				},
			});
		},
	},
};
</script>

<style scoped lang="scss">
.heard-body {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}
.heard-right {
	display: flex;
	margin-left: 15px;
	align-items: center;
}
.page {
	margin-top: 10px;
}
.motion-table1 {
	opacity: 0;
	animation-name: error-num;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: calc(1 / 10) + s;
}
</style>
